<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地点微调</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a0f6ffc91a1c9c661734a2c4e53669ab"></script>
    <style>
        #container {
            width: 3.75rem;
            height: 6.23rem;
        }

        .amap-logo {
            display: none;
        }

        .amap-copyright {
            bottom: -100px;
            display: none;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">地点微调</span>
        <span class="public-header-right"></span>
    </div>


    <!--地图用的标签-->
    <div id="container"></div>

    <div class="map">
        <ul>
            <li class="clearfix">
                <p class="t1">XX地址</p>
                <p class="t2">XX详细地址</p>
                <span class="active"></span>
            </li>
             <li class="clearfix">
                <p class="t1">XX地址</p>
                <p class="t2">XX详细地址</p>
                <span></span>
            </li>
             <li class="clearfix">
                <p class="t1">XX地址</p>
                <p class="t2">XX详细地址</p>
                <span></span>
            </li>
        </ul>
    </div>


    <script>
        $(function () {

            // 初始化地图
            var map = new AMap.Map('container', {
                zoom: 18,
                center: [116.39, 39.9] //new AMap.LngLat(116.39,39.9)
            });

            // 设置标记的icon
            // 设置content之后，icon的效果会被覆盖
            var icon = new AMap.Icon({
                image: '../img/小定位@2x.png', //icon可缺省，缺省时为默认的蓝色水滴图标，
                size: new AMap.Size(16, 16),
                imageSize: new AMap.Size(16, 16),
            });

            /*
             * 设置地图上显示的数字
             * 同时设置地图上的icon，不然没有显示
             */
            // var content =
            //     "<div class='tip' style='font-size:10px'><span class='red' style='color: rgba(231,59,59,1);font-size:10px'>12</span>/<span class='blank' style='font-size: 10px'>123</span></div><div><img src='img/小定位@2x.png' alt='' style='width: 20px;height: 20px;margin: 0 auto;display: block;'></div>";

            // 设置标记
            var marker = new AMap.Marker({
                // content: content,
                icon: icon, //24px*24px
                position: [116.39, 39.9], //marker所在的位置
                map: map, //创建时直接赋予map属性
            });

        })
    </script>

</body>

</html>